<template>
   <div class="contact-component">

   		<div class=" contact QQ">
   			<a href="http://www.facebook.com/macauhouse" target="_blank" >
   				<img :src="require('../../static/images/QQ.png')"  @mouseenter="qqShow = true" @mouseleave="qqShow = false">
   			</a>
   			
   			<transition name="slide-fade"  mode="out-in">
   			<div class="hover" v-if="qqShow" >
	   				點擊進入Facebook
	   			</div>
			</transition>
   			
   		</div>
	  	<div class="contact">
	  		<img :src="require('../../static/images/phone.png')"  @mouseenter="phoneShow = true" @mouseleave="phoneShow = false">
	  		<transition name="slide-fade"  mode="out-in">
			    <div class="hover" v-if="phoneShow">
	   				+853  68811110
	   			</div>
			</transition>
	  	</div>
	   	<div class="erweimaOut">
	  		<img :src="require('../../static/images/erweima.png')" @mouseenter="erweimaShow = true" @mouseleave="erweimaShow = false">
	  		<transition name="slide-fade"  mode="out-in">
	  			<div class="erweima" v-if="erweimaShow">
	  				<img :src="require('../../static/images/index/erweima.jpg')" >
	  			</div>
	   			
			</transition>
	  	</div>
   </div>
</template>

<script>
export default {
	components:{
		
	},
	data(){
		return{
			qqShow: false,
			phoneShow: false,
			erweimaShow: false,

		}
	},
	mounted(){
		

   
	
	},
}
</script>

<style lang="scss">
@import "../style/base/_base";
.contact-component{
   position: fixed;
   right:0;
   bottom: 2%;
   z-index:9999;
   .contact{
   		@include vertical-centering;
   		flex-direction:row-reverse;
   		margin-top: 10px;
   		.hover{
   			@include allCenter;
   			color:#fff;
   			// width:100px;
   			height:45px;
   			background: $hover;
   			margin-right: 4px;
   			border-radius: 2px;
   			padding:0 15px;
   		}
	   	img{
		   	width:45px;
		   	height:45px;
	   	}
   }
   .erweimaOut{
			@include vertical-centering;
			flex-direction:row-reverse;
			position:relative;
			margin-top: 10px;
			// top: 0px;
		.erweima{
			position: absolute;
   			width:100px;
			bottom: 0;
			right: 100%;
			margin-right: 10px;
   			img{
				width:100%;
				// height:100%;
   			}
   		}
   	}
   .slide-fade-enter-active {
	  transition: all .3s linear;
	}
	.slide-fade-leave-active {
	  transition: all .1s linear;
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
	  transform: translateX(10px);
	  opacity: 0;
	}
	   
}
</style>